import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import store from '@/store'
import { Message } from 'element-ui'

Vue.use(VueRouter)


// 导航守卫   =>  (路由守卫)
// 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航  => 在路由跳转过程中,可以控制路由跳转,也可以取消跳转,还可以重定向

// 有以下三种:
// 全局路由守卫  => 全局前置守卫  全局解析守卫  全局后置钩子
// 路由独享守卫
// 组件内路由守卫



const router = new VueRouter({
  // mode: 'history',
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

// 全局路由守卫 => 通过路由实例配置, 每次发生路由跳转,均会执行对应的中间件函数

// 全局前置守卫  router.beforeEach
// 全局解析守卫  router.beforeResolve
// 全局后置钩子  router.afterEach



// 全局前置守卫 ( 中间件)  => 每次发生路由跳转,均会执行对应的中间件函数(钩子函数) 
// router.beforeEach(function(to,form,next){})

//  全局解析守卫   => 用法通全局前置守卫, 只不过触发的时机比全局前置守卫稍晚 =>  路由前传前的最后一道守卫
// router.beforeResolve(function(to,form,next){})

//  全局后置钩子   => 发生在导航被确认之后执行,导航已经确定要跳转了(没有next函数) => 一般用于做前端埋点操作 
// 用户访问统计
// 用户访问统计包含 PV（Page View）、UV（Unique Visitor）、VV（Visit View）、IP 等。PV 用来统计一天之内页面的被访问次数，机刷也可以造成 PV 数据提升。UV 用来统计一天之内访问页面的用户数量，一般使用 IP 统计（IP 统计并不谨慎，同一个办公区或校园公用一个 IP）；使用 cookie + IP 统计（cookie 会被刷新，造成用户数被重复统计）；使用 userAgent + API 统计（userAgent + API 相同的情况也常有发生）。UV 统计的细化点是新访客数、新访客比率等。VV 用来统计一天之内网站被用户访问的次数；用户访问网站到结束访问视为 1 次，因此同一个用户在一天之内可能造成多条 VV。IP 用来统计一天之内访问网站的不重复 IP 数。
// router.afterEach(function(to,form){})


// 路由独享守卫   => 只针对某个特定的路由生效,在routes中的对应路由中配置
// 



// 回调函数有三个参数
// to => 到哪去,要跳转的路由地址
// from => 从哪来, 要离开的路由地址
// next =>  函数
//       next()   进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
//       next(false)   中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
//       next("/home") / next({path:"/home"}) 重定向=>当前的导航被中断，然后进行一个新的导航。
//       

let count = 1;  // 每次刷新页面 count 都会重置为1

let whiteList = ["/login", "/404"];  // 白名单 -> 所有用户均可访问的路由路径
router.beforeEach(async function (to, from, next) {
  console.log("全局路由守卫");
  console.log("from", from);
  console.log("to", to);
  if (!whiteList.includes(to.path)) {// 非白名单 => 主页及其下的子页面
    
    // 问题3: 每次路由跳转都会触发此方法  同步localStorage到vuex  (initAndUpdateUserInfo 异步方法 -> 返回Promise实例 -> await) -> 频率太高了
    // 解决方案 => 进入主页面时执行一次  => 如何判读是第一次进入主页面
    console.log("--------------------------",count);
    if(count == 1){
      await store.dispatch("initAndUpdateUserInfo");
      count ++;  
    }
    
    // 问题2: 刷新页面!! =>  路由守卫中的代码执行时, 主页面如果还未挂载 => 无法同步数据到vuex
    // 解决方法:  刷新页面先同步数据到vuex 
    let isLogin = store.getters.isLogin;
    let role = store.state.userInfo.role;
    let checkedkeys = store.state.userInfo.checkedkeys;
    console.log("isLogin", isLogin);
    console.log("checkedkeys", checkedkeys);

    if (isLogin) {  // 判断用户是否登录

      // 问题1: admin 没有checkedkeys, 登不进主页会被拒绝 
      // 解决方案: 如果是超级管理员 => 直接进
      if (role == 1 || checkedkeys.includes(to.path)) { // 是否是权限列表中的路径 (admin 没有checkedkeys)
        next();
      } else {
        next(false);
        Message.warning("暂无权限");
      }

    } else { // 没有登录=> 去登录
      next({ path: "/login", query: { ReturnUrl: to.fullPath } })
    }

  } else { // 白名单
    next();
  }
})


// 模拟页面权限 -> 不是你能访问的你就跳不了
/* let checkedkeys = ["/","/login","/404","/home","/pro/list","/banner/list"]; //模拟普通用户的权限列表

router.beforeEach(function(to, from,next){
  console.log("全局前置守卫:2");

  if(checkedkeys.includes(to.path)){
    next();
  }else{
    next(false);
  }
}) */


// 每次跳转,需要判断用户是否登录
/* let isLogin = true;
let whiteList = ["/login","/404"];

router.beforeEach(function(to, from,next){
  console.log("全局前置守卫:2");

  if(!whiteList.includes(to.path)){ // 不是  /login,/404  => 主页面中的内容
    if(isLogin){ 
      next();
    }else{
      next({path:"/login",query:{ReturnUrl:to.fullPath}})
    }
    
  }else{
    next()
  }

 
})
 */



export default router
